<%@ page language="java" contentType="text/html; charset=UTF-8" pageEncoding="UTF-8" %>
<%@include file="../mytags.jsp" %>
<!DOCTYPE html>
<html>
<head>
<t:base type="jquery"></t:base>
<meta charset="utf-8">
    <meta name="viewport" content="width=device-width,initial-scale=1,minimum-scale=1,maximum-scale=1,user-scalable=no"/>
    <title>快速报修</title>
    <script type="text/javascript" charset="utf-8">
        mui.init();
        $(function () {
       		$("#faultPic").change(function(){
				var self = this;
				var maxSize = 300 * 1024;//307200
				var file = self.files[0];
				console.log(file)
				if (!self['value'].match(/.jpg|.gif|.png|.bmp|.jpeg/i)){　　//判断上传文件格式
                    return mui.alert("上传的图片格式不正确，请重新选择")
				}
				var reader = new FileReader();
				reader.readAsDataURL(file);
				reader.onload = function(e){
					var result = this.result,
						img = new Image();
					img.src = result;
					img.onload = function(){
						if(result.length > maxSize){
							var fileStream = compress(img);
							uploadFile(file.name, fileStream);
						}else{
							uploadFile(file.name, result);
						}
					}
				}
       		});
       		
       		$("#sub").click(function(){
  			    if (formValidName.check() == false) {
  			        $('#formobj').submit();
  			    } else {
  			        var phoneNum = $("#contactsPhone").val();
  			        var openId = $("#openId").val();
  			        var type="KSBX";
  			        if(phoneNum == ''){
  			            return;
  			        }
  			        mui.confirm("您确认提交订单？",'',['取消','确认'],function(idx){
  			            if(idx.index == 1){
  			                openMask();
  			                $.getJSON("cbsQuickRepairController.do?checkVerify",{verifyCode : $("#verifyCode").val(), busType : '<%=StaticValue.RANDOMCODE_QUICK_REPARIR%>'},function(re){
  			                    closeMask();
  			                    if(re.success){
                                    $.post("cbsQuickRepairController.do?doAddNew", $("#formobj").serialize(), function (data) {
                                        checkServiceUser(phoneNum,$("#contactsName").val());//建立用户初始化用户
                                        data = $.parseJSON(data);
                                        if (data.success) {
                                            mui.openWindow({
                                                createNew: true,
                                                url: "cbsQuickRepairController.do?subQuickRepairSuc&orderNo=" + data.obj.code
                                            })
                                        } else {
                                            mui.alert(data.msg,function(){
                                                $(".mui-backdrop").remove();
                                            });
                                        }
                                    });
  			                    }else{
  			                        mui.alert("验证码错误",function(){
  			                            $(".mui-backdrop").remove();
  			                        });
  			                    }
  			                })
  			            }
  			        })
  			    }
       		});
        })
        function compress(img){
        	var canvas = document.createElement('canvas'),
				ctx = canvas.getContext('2d');
			canvas.width = img.width;
			canvas.height = img.height;
			ctx.drawImage(img, 0, 0,img.width, img.height);
			return canvas.toDataURL('image/jpeg', 0.2);
        }
        function uploadFile(fileName, fileStream){
            var formdata = new FormData();
            formdata.append("fileName",fileName);
            formdata.append("fileStream",fileStream);
            $.ajax({
                url : "cbsQuickRepairController.do?uploadFaultPicNew",
                // data : {
                // 	"fileStream" :fileStream
                // 	},
                data:formdata,
                cache : false,
                // dataType : 'json',
                // contentType: "application/json; charset=utf-8",
                processData: false,
                contentType: false,
                type : 'POST',
                success : function(data){
                    data=JSON.parse(data)
                    console.log(data)
        			if(data.success){
        				var img = new Image();
            			img.src = fileStream;
            			img.width = 100;
            			img.height = 100;
            			img.onload = function(){
            				var html =	'<div id="'+ data.obj +'" style="width:100px;display:inline-block;margin:5px;">' +
											'<a class="mui-btn mui-btn-outlined" style="width:100px;margin:5px 0;" onclick="deleAttach(\''+ data.obj +'\')">删除</a>' +
											'<input type="hidden" value="'+ data.obj +'" name="faultPic" />' +
            							'</div>';
    	        			$("#showFileName").append(html);
    	        			$("#" + data.obj).prepend(img);
            			}
        			}else{
        				mui.alert(data.msg);
        			}
        		}
        	});
        }

        function deleAttach(fileLogId){
			mui.confirm('确认删除？', '中影巴可', ['否', '是'], function(e) {
				if (e.index == 1) {

                    $.ajax({
                        url: "cbsQuickRepairController.do?delFile",
                        data: {
                            "id": fileLogId
                        },
                        cache: false,
                        dataType: 'json',
                        type: 'POST',
                        async: false,
                        success: function (data) {
                            $("#" + fileLogId).remove();
                        }
                    });
				}
            })
        }

    </script>
</head>
<body>
<div class="tel"><a href="tel:400-88-22726"> <img src="${webRoot }images/tel.jpg"></a></div>
<div class="eq1">
	<div class="geren" style="font-weight: bold;margin:10px 0px 10px 15px;">
        <img src="${webRoot }images/about.jpg">报修信息
    </div>
    <t:formvalid formid="formobj" dialog="false" usePlugin="password" layout="table" action="cbsQuickRepairController.do?doAddNew"
                 tiptype="popTip" validFormName="formValidName" showAllError="false" callback="subcallback">
        <div class="mui-card form-card">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <span class="cinema">影院名称<label style="color: red;">*</label></span>
                    <input type="text" name="cinemaName" value="${belongCmName}" placeholder="填写影院名称" datatype="*1-100" nullmsg="填写影院名称" />
                </li>
                <li class="mui-table-view-cell">
                    <span class="shebei">设备序列号<label style="color: red;">*</label></span>
                    <input type="text" name="esSn" value="${sn}" placeholder="填写设备序列号"  datatype="*1-100" nullmsg="填写设备序列号" />
                </li>
                <li class="mui-table-view-cell">
                    <span class="chanpin">产品型号<label style="color: red;">*</label></span>
                    <input type="text" name="productModel" value="${esTypeDesc }" placeholder="填写产品型号"  datatype="*1-100" nullmsg="填写产品型号" />
                </li>
                <li class="mui-table-view-cell">
                    <span class="guzh">故障代码</span>
                    <input type="text" name="faultCode"  placeholder="填写故障代码"/>
                </li>
                <li class="mui-table-view-cell">
                    <span class="miaos">故障描述</span>
                    <textarea style="width:60%;font-size:14px;" name="faultDetail" placeholder="填写故障描述"></textarea>
                </li>
                <li class="mui-table-view-cell">
                    <span class="pic">故障图片</span>
                    <a class="a-upload" style="margin-top:5px;">
                    	<input type="file" id="faultPic" accept="image/*"  />上传图片
                    </a>
                    <div id="showFileName" style="margin: 5px;display: inline-block;width: 100%;"></div>
                </li>
            </ul>
        </div>
        <div class="mui-card form-card" style="margin-top: 10px;margin-bottom: 10px;">
            <ul class="mui-table-view">
                <li class="mui-table-view-cell">
                    <input hidden="hidden" id="openId" name="openId" value="${openId}">
                    <span class="contact">联系人姓名<label style="color: red;">*</label></span>
                    <input type="text" name="contactsName" id="contactsName" value="${ct.name}" datatype="*2-10" placeholder="填写姓名"/>
                </li>
                <li class="mui-table-view-cell">
                    <span class="m-phone">联系人电话<label style="color: red;">*</label></span>
                    <input type="text" name="contactsPhone" id="contactsPhone" value="${ct.cellphone1}" datatype="cPhone" placeholder="填写手机号"/>
                </li>
                <li class="mui-table-view-cell">
                    <span class="verify-code">验证码<label style="color: red;">*</label></span>
                    <input type="text" style="width:30%" id="verifyCode" datatype="n" nullmsg="请输入验证码" placeholder="验证码"/>
                    <a href="javascript:sendVerifyCodeNew('cbsQuickRepairController.do?sendVerifyCode','<%=StaticValue.SEND_RANDOMCODE_LIVETIME%>','<%=StaticValue.RANDOMCODE_QUICK_REPARIR%>','contactsPhone')" id="sendBtn" class="a-verify">发送验证码</a>
                </li>
            </ul>
        </div>
    </t:formvalid>
    <div style="width:92%;margin: 0 auto;margin-bottom: 60px;">
        <a class="mui-btn mui-btn-block mui-btn-primary" id="sub">提交订单</a>
    </div>
	<div class="fot" style="position: fixed;bottom: 0px;">
        如需更多服务请拨打服务热线<a href="tel:400-88-22726" style="color:red">400-88-22726</a>咨询
    </div>
</div>
</body>
</html>